import {Component, ViewChild, EventEmitter} from '@angular/core';

import _ from 'lodash';

const CSS = {
  flex: 'flex',
  transitionDuration: '-webkit-transition-duration',
  transform: '-webkit-transform'
};

@Component({
  selector: 'ft-menu',
  inputs: ['menu'],
  outputs: ['changed'],
  queries: {
    wrapper: new ViewChild('wrapper')
  },
  template:
  `<div class="toolbar-background"></div>
  <div #wrapper class="ft-menu-wrapper">
    <div *ngFor="let item of menu; let i = index">
      <a (click)="select(i)" [class.selected]="i == selected">
        {{item.name}}
      </a>
    </div>
  </div>`
})
export class FtMenu {

  constructor() {
    this.changed = new EventEmitter();
  }

  ngOnInit() {

    this.metric = {
      offsetX: 0,
      offsetY: 0,
      menuWidth: this.wrapper.nativeElement.clientWidth,
      childWidth: 0,
      maxOffsetX: 0,
      movable: false,
    };

    this.wrapper.nativeElement.addEventListener('touchstart', (e) => {
      this.onTouchStart(e);
    });

    this.wrapper.nativeElement.addEventListener('touchmove', (e) => {
      this.onTouchMove(e);
    });

    this.wrapper.nativeElement.addEventListener('touchend', (e) => {
      this.onTouchEnd(e);
    });

    // this.selected = 0;
    // this.select(0);
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
    this.select(0);
  }

  ngAfterViewChecked() {
    let childWidth = 0;
    _.each(this.wrapper.nativeElement.children, child => {
      childWidth += child.clientWidth;
    });

    if (childWidth > 0) {
      this.metric.childWidth = childWidth;
      this.metric.maxOffsetX = this.metric.menuWidth - childWidth;
    }

    if (this.metric.childWidth > this.metric.menuWidth) {
      this.metric.movable = true;
    } else {
      _.each(this.wrapper.nativeElement.children, child => {
        child.style[CSS.flex] = '1';
      });
    }
  }

  onTouchStart(e) {

    this.touch = {
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY,
      lastX: e.touches[0].clientX,
      lastY: e.touches[0].clientY,
    };

    this.wrapper.nativeElement.style[CSS.transitionDuration] = '0ms';

    var curTransform = new window.WebKitCSSMatrix(window.getComputedStyle(this.wrapper.nativeElement).webkitTransform);
    this.metric.offsetX = curTransform.m41;

  }

  onTouchEnd(e) {
    this.touch.endX = e.changedTouches[0].clientX;
    this.touch.endY = e.changedTouches[0].clientX;
  }

  onTouchMove(e) {

    if (!this.metric.movable) {
      return;
    }

    let clientX = e.touches[0].clientX;
    let clientY = e.touches[0].clientY;

    this.touch.deltaX = clientX - this.touch.lastX;
    this.touch.deltaY = clientY - this.touch.lastY;

    this.touch.lastX = clientX;
    this.touch.lastY = clientY;

    if ((this.metric.offsetX + this.touch.deltaX) > 0) {
      this.metric.offsetX = 0;
    } else if ((this.metric.offsetX + this.touch.deltaX) < this.metric.maxOffsetX) {
      this.metric.offsetX = this.metric.maxOffsetX;
    } else {
      this.metric.offsetX += this.touch.deltaX;
    }

    this.wrapper.nativeElement.style[CSS.transform] = 'translate3d(' + this.metric.offsetX + 'px, 0, 0)';
  }

  select(index) {

    if (!this.menu || this.menu.length == 0) {
      return;
    }

    if (this.metric.movable) {
      let offset = 0;

      for (let loop = 0; loop < index; loop++) {
        offset -= this.wrapper.nativeElement.children[loop].clientWidth;
      }

      if (offset < this.metric.maxOffsetX) {
        offset = this.metric.maxOffsetX;
      }

      this.wrapper.nativeElement.style[CSS.transitionDuration] = '300ms';
      this.wrapper.nativeElement.style[CSS.transform] = 'translate3d(' + offset + 'px, 0, 0)';
    }

    if (this.selected != index) {
      this.selected = index;
      this.changed.emit(this.menu[index]);
    }
  }

}